<template>
  <div class="app-container">
    <div class="form-container">
          <el-form ref="searchForm" :model="searchForm" inline label-width="80px">

                      <el-form-item  label="时间范围" prop="time">
                            <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                      </el-form-item>

                  <el-button icon="el-icon-search" type="primary" circle @click="getData" />
                  <el-button icon="el-icon-refresh-right" type="warning" size="medium" round @click="resetForm('searchForm')">
                      重置
                    </el-button>
  
        </el-form>
    </div>
    <div class="action">
        <el-switch  v-model="show" 
            active-color="#13ce66" inactive-color="#ff4949" 
            active-text="显示表格" inactive-text="显示图标"/>
            <span style="margin-left: 10px;">{{'总金额: '+ sum}}</span>
    </div>

    <!-- 表格 -->
    <div v-show="show">
       <el-table stripe border fit highlight-current-row
    :header-cell-style="{textAlign: 'center'}"
     :cell-style="{ textAlign: 'center' }"
    :data="payments.slice((page - 1) * limit, page * limit)" style="width: 100%">
    
      <el-table-column label="订单ID" prop="orderId" width="80"/>

      <el-table-column label="缴费金额" prop="money"/>

      <el-table-column label="创建时间" prop="createTime" min-width="90">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 5px">{{ $dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>


      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getData"/>
    </div>



    <div class="main" v-show="!show" >
      <div class="temp">
        <div id="payment" style="height:100%; width:100%; -webkit-tap-highlight-color: transparent; user-select: none;" ></div>
      </div>
    </div>

  </div>
   
</template>


<script>


import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      option : {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
          }]
      },
      page: 1,
      limit: 5,
      total: 0,
      sum:0,
      show:false,
      payments:[],
      searchForm: {
        time:[],
      },
      datas:[]

    };
  },
  methods: {
      async getData() {  
        let res = await this.$store.dispatch('payment/payChart',this.searchForm) 

          if(res.code == 1) {
              this.payments = res.data 
              this.total = this.payments.length 
              console.log(this.payments);
          }else{
              this.$message({ showClose: true,message: res.msg, type: 'error'})
          }

          
          // // 统计
          this.initData()

    
      },
      initData() {
          this.countPayment()
          //初始化数据
        // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.getInstanceByDom(document.getElementById("payment"))
      if (myChart == null) { // 如果不存在，就进行初始化
          myChart =  this.$echarts.init(document.getElementById('payment'));
      }
        // 绘制图表
        myChart.setOption(this.option);
      },
      countPayment() {
        // 先清除之前的数据 x y 轴
        this.option.series[0].data = []
        this.option.xAxis.data = []
        // 清除 
        this.datas=[]

        this.sum = 0
        // 统计支付数据 合并同一天时间
        for(let i=0; i < this.payments.length; i++) {
              // 取出这个订单的 总金额 
              let { money,createTime }= this.payments[i]
              // 计算金额
                this.sum += money 
                createTime = this.$dayjs(createTime).format('YYYY-MM-DD')
              
              // console.log('id '+orderId+ ' money' +money + createTime );

              // 查询是否存在这个 时间
              const index = this.datas.map(item => item.createTime).indexOf(createTime)
              if(index != -1) {
                // 时间存在加 钱
                  this.datas[index].money += money
              }else{
                this.datas.push({createTime,money})
              }
        }
        // 根据创建时间排序
          this.datas = this.sortData(this.datas, "order");
         for(let i=0; i < this.datas.length; i++) {
              // 取出这个订单的 总金额 
              let {money,createTime }= this.datas[i]
              this.option.series[0].data.push(money)
              this.option.xAxis.data.push(createTime)     
          
        }
        // console.log(this.option);




 
      },
      sortData(data,way){
          if(way == "order"){
              return data.sort(function(a,b) {
                //这里的time要根据本身的数据来，后面的正则匹配也要根据自己数据来
              return Date.parse(a.createTime.replace(/-/g,"/"))-Date.parse(b.createTime.replace(/-/g,"/"));
            });
          }else if(way == "back"){
            return data.sort(function(a,b) {
              return Date.parse(b.createTime.replace(/-/g,"/"))-Date.parse(a.createTime.replace(/-/g,"/"));
            });
          }
      },
      resetForm(searchForm) {
        this.$refs[searchForm].resetFields()
        this.$message({  message: '清空成功', type: 'success'})
      }
    },
    mounted() {
      this.getData()

    }
  }
  </script>

<style lang="scss" scoped>
  .form-container {
    display: flex;
    width: 100%;
    align-items:center;
    justify-content:center;
  }
  .search {
    width: 100%;
    text-align: center;
    padding-left: 20px;
  }
  .main{
    // margin-top: 50px;
    width: 100%;
    height: 100%
  }
  .temp{
    width: 1000px;
    margin: 0 auto;
    height: 600px;
  }
  .action {
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
  }
</style>







